<template>
  <div class="sale" ww3 auto>
    <div class="sale-bar" flex flex-b flex-c>
      <p grey fz14>您有<i>499</i>件作品，共售出<i>26</i>次，下载率<i>5</i>%</p>

      <div class="sale-bar-r">
        <el-input
          placeholder="请输入内容"
          suffix-icon="el-icon-search"
          v-model="input2"
        >
        </el-input>
      </div>
    </div>

    <div class="sale-type" flex flex-b flex-c>
      <!-- <div class="sale-type-l">
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">个人授权</el-radio>
        <el-radio v-model="radio" label="3">企业授权</el-radio>
        <el-radio v-model="radio" label="4">企业PLUS授权</el-radio>
      </div> -->

      <!-- <div class="sale-type-r">
        <el-button>详细授权规则</el-button>
      </div> -->
    </div>

    <div class="sale-table">
      <el-table :data="list" style="width: 100%">
        <el-table-column fixed prop="name" label="素材" width="290">
          <template slot-scope="scope">
            <dl class="table-img" pos-a>
              <dt pos-a>
                <p pos-b ww1 center>时尚潮流炫酷快闪模板<br />AE模板</p>
                <el-image ww1 :src="scope.row.name" fit="cover"> </el-image>
              </dt>
              <dd pos-b flex flex-b flex-c ww1>
                素材编号：7899
                <span>1分钟前</span>
              </dd>
            </dl>
          </template>
        </el-table-column>

        <el-table-column prop="date" label="授权类型" width="150">
        </el-table-column>

        <el-table-column prop="province" label="来自关键词" width="160">
          <template slot-scope="scope">
            <p style="padding: 0 0 6px 44px">
              {{ scope.row.province }}
            </p>
            <el-button size="mini" @click="handleEdit(scope.row.address)">
              (查看转化分析)
            </el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="city" label="买家" width="120"></el-table-column> -->
        <el-table-column prop="address" label="订单授权证书编号" width="200">
          <template slot-scope="scope">
            <p style="color: #222">
              {{ scope.row.address }}
            </p>
            买家：{{ scope.row.city }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="收益¥" width="120"></el-table-column>
        <el-table-column prop="date2" label="售卖售权时间" width="120"></el-table-column>
        <el-table-column prop="per" label="被授权主体" width="100">
          <template slot-scope="scope">
            <p style="color: #222">
              {{ scope.row.per }}
            </p>
            {{ scope.row.card }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from "@/api/info/car"
export default {
  name: "SaleRecord",
  data() {
    return {
      radio: "1",

      tableData: [
        {
          date: "企业PLUS授权",
          name: "https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "v17ssss",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
        },
        {
          date: "个人授权",
          name: "https://pic.vjshi.com/2021-06-09/87f4c50b74334a48b62c1f06f102bb02/online/be0c2cce32dc43f2bf3b716f6cf6cbe6.jpg?x-oss-process=style/resize_w_285_crop_h_428",
          province: "炫酷",
          city: "ariaaaaa",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-10-01",
          per: "",
        },
        {
          date: "企业授权",
          name: "https://pic.vjshi.com/2021-03-07/27d0decf006eda7c99ad4cd0afc763a4/online/ccfa665069617086d5eaa228ec5dc536.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "v17113016",
          address: "9134001005901813064",
          zip: 200333,
          date2: "2021-10-01",
          per: "",
        },
      ],
      pageSize: 2,
      pageNum: 1,
      total: 10,
      list: []
    };
  },
  mounted() {
    this.orderPage();
  },
  methods: {
    /**
     * 分页
     */
    currentChange(val) {
      this.pageNum = val;
      this.orderPage();
    },
    /**
     * 获取销售记录列表
     */
    orderPage() {
      let data = {
        shopId: sessionStorage.getItem('userId')
      }
      let page = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }
      $http.orderPage(data, page).then(res => {
        this.total = res.total;
        this.list = res.rows;
      })
    },
    handleEdit(id) {
      this.$router.push({
        name: "Analyse",
        params: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped>
.sale-bar p {
  font-size: 14px;
}
.sale-table >>> .el-table th.el-table__cell > .cell {
  color: #050404;
  text-align: center;
}
.sale-table {
  margin-bottom: 2%;
}
.sale-table >>> .el-table td {
  text-align: center;
}
.sale >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #e74b3c;
}
</style>